<template>
  <el-row>
    <el-col :span="24">
      <el-table v-loading="loading" :stripe="true" :data="productList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="goods_name" label="商品名称" width="520" />
        <el-table-column prop="goods_price" :formatter="priceFormat" label="价格" width="80"/>
        <el-table-column prop="address" label="标签"  width="300">
          <template #default="{row}">
            <el-input v-focus @keyup.esc="row.inputValue=''" @keyup.enter="handleInputBlur(row)" v-model.trim="row.inputValue" v-if="row.inputVisible" @blur="handleInputBlur(row)" placeholder="输入标签" clearable />
            <el-button v-else type="primary" @click="row.inputVisible=!row.inputVisible">+Tag</el-button>
            <el-tag type="warning" v-for="item in row.tags">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button type="danger" @click="deleteItem(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
//获取全局发送请求的对象
import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox, RowInstance} from "element-plus";
import {valid} from "mockjs";

const http = getCurrentInstance()?.appContext.config.globalProperties.$http

// -----------响应式数据部分开始----------

// 加载动画效果
const loading = ref(true)
// 是否显示输入框
const showInput = ref(false)

const state = reactive({
  productList: []
})

const {productList} = toRefs(state)

// -----------响应式数据部分结束----------

// -----------方法部分开始----------

// 获取商品列表数据
const getProductList = async () => {
  const {data:res} = await http.get('/goods')
  if (res.code !== 200) return ElMessage.error('获取数据失败！')
  state.productList = res.data
  loading.value = false
}

// 价格格式化
const priceFormat = (row:any, column:any) => {
  const price = row[column.property]
  return `¥${price}`
}

// 输入文本框失去焦点
const handleInputBlur = (row:any) => {
  const inputVal = row.inputValue
  row.inputValue = ''
  row.inputVisible = false
  // 处理添加标签
  if (!inputVal || row.tags.includes(inputVal)) return
  row.tags.push(inputVal)
}

// 删除数据
const deleteItem = async (rowIndex:any,row: any) => {
  ElMessageBox.confirm(
      `确定要删除第[ ${rowIndex + 1} ]条数据吗?`,
      '提示信息',
      {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',}
  ).then(async () => {
    // axios delete bug 要添加data 后台才可以获取到数据
    const id = row.id
    const {data: res} = await http.delete('/goods', {data: {id: id}})
    if (res.code !== 200) return ElMessage.error({showClose: true, message: res.mes})
    ElMessage.success({showClose: true, message: res.mes})
    // 更新数据
    getProductList()
  }).catch(() => {
    ElMessage({
      showClose: true,
      type: 'info',
      message: '取消删除',
    })
  })
}

// -----------方法部分结束----------

// 加载数据
onMounted(() => {
  getProductList()
})

</script>

<style scoped>
.el-row {
  margin-top: 20px;
}
.el-tag {
  margin: 5px;
}
</style>
